<template>
  <el-row type="flex" class="row-bg box" justify="space-around">
    <el-col :span="24" style="display: flex; justify-content: center; align-items: center">
      <p style="color: #2d8cf0; text-align: center; font-weight: bold;">进件查询</p>
    </el-col>
    <el-col :span="24">
      <el-row type="flex" class="row-bg boxc" justify="space-around">
        <el-col :span="24">
          <el-form
            ref="formRef"
            :model="formData"
            :rules="formRules"
            v-loading="formLoading"
          >
            <el-form-item prop="name" class="ipt">
              <el-input v-model="formData.name" placeholder="请输入姓名" />
            </el-form-item>
            <el-form-item prop="idCard" class="ipt">
              <el-input v-model="formData.idCard" placeholder="请输入身份证" />
            </el-form-item>
            <el-form-item prop="mobile" class="ipt">
              <el-input v-model="formData.mobile" placeholder="请输入手机号" />
            </el-form-item>
            <el-form-item prop="read" style="margin-bottom: 50px">
              <el-radio-group v-model="formData.read">
                <el-radio :value="1">
                  <p style="display: flex;">我已阅读
                    <el-button type="text" @click="userxyShow = true">《用户协议》</el-button>和
                    <el-button type="text" style="margin: 0" @click="userzcShow = true">《隐私协议》</el-button>
                  </p>
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="24">
          <el-button @click="authShow = true" class="btn" type="primary" :disabled="formLoading">确 定</el-button>
        </el-col>
      </el-row>
    </el-col>
  </el-row>

  <div v-if="submitSuccess" style="width: 100%; height: 100vh; position: absolute; background: white; left: 0; top: 0; z-index: 999; display: flex; justify-content: center; align-items: center;">
    <div style="text-align: center">
      <p><Icon icon="ep:success-filled" color="green" size="88"/></p>
      <p style="font-size: 24px">提交成功</p>
    </div>
  </div>

  <div v-if="userxyShow" style="width: 100%; height: 100vh; position: absolute; background: white; left: 0; top: 0; z-index: 999;">
    <div style="padding: 10px" v-html="config.userManual"></div>
    <el-button type="primary" :disabled="userxyShowDis" @click="userxyShow = false" class="fixbtn">同意并继续</el-button>
  </div>

  <div v-if="userzcShow" style="width: 100%; height: 100vh; position: absolute; background: white; left: 0; top: 0; z-index: 999;">
    <div style="padding: 10px" v-html="config.privacyPolicy"></div>
    <el-button type="primary" :disabled="userzcShowDis" @click="userzcShow = false" class="fixbtn">同意并继续</el-button>
  </div>

  <div v-if="authShow" style="width: 100%; height: 100vh; position: absolute; background: white; left: 0; top: 0; z-index: 999; overflow-y: auto">
    <div style="padding: 10px;">
      <p>本人姓名：{{ formData.name }}</p><br/>
      <p>身份证号：{{ formData.idCard }}</p><br/>
      <p>因本人申请<strong>融资担保</strong>业务所需，故向贵公司作出以下授权：</p><br/>
      <p><strong>一、本人经充分了解相关法律法规，同意授权贵公司通过第三方机构（包括但不限于 朴道征信有限公司等征信机构）或指定第三方收集本人的个人信息（包括但不限于本人公民身份信息、联系方式、个人征信记录等），授权期至本人业务结清之日止，本人同意所收集的本人信息可用于个人办理业务申请、对已发放的业务进行业务前后风险管理及风险评估与控制。</strong></p><br/>
      <p><strong>二、本人同意朴道征信有限公司（联系方式：service@pudaocredit.cn ）基于为本人与贵公司之间的金融活动提供信用服务的目的，可向贵公司和有关部门、单位（包括但不限于公安、司法、教育、全国公民身份证号码查询服务中心、通信运营商、银联、通联、易宝、宝付、社保、公积金、税务、民政、物流、电子商务平台、互联网平台、行业协会等合法留存本人信息的第三方机构等）查询、核实、采集、整理、保存、加工本人能够用于判断个人信用状况的各类信息（包括但不限于个人的身份、地址、交通、通信、债务、财产、支付、消费、生产经营、履行法定义务等信息，以及基于前述信息对个人信用状况形成的分析、评价类信息），包括可能对本人产生负面影响的不良信息，并可将上述信息在本授权书所列的用途范围内向贵公司提供。上述信息的保存期限为法律法规要求的最短时间，其中个人不良信息的保存期限为自不良行为或事件终止之日起5年。</strong></p><br/>
      <p><strong>三、本人同意授权合法存有本人信息的机构向第三方机构（包括但不限于征信机构）提供本人的上述信息。</strong></p><br/>
      <p>特别声明：<strong>本人已知悉本授权书全部内容（特别是加粗字体内容）的含义及因此产生的法律效力，自愿做出以上授权。本授权书是本人真实意思表示，本人同意承担由此带来的一切法律后果。</strong></p><br/>
      <p>特别提示：本授权书效力具有独立性，不因相关业务合同或条款无效或被撤销而无效或失效，<strong>本授权一经作出，便不可撤销</strong>。为了保障您的合法权益，您应当阅读并遵守本授权书。请您务必审慎阅读，并充分理解本授权书的全部内容，特别是以加粗形式提示您注意的。<strong>若您不接受本授权书的任何条款，请您立即停止授权。</strong></p><br/>
      <p>授权人：{{ formData.name }}</p><br/>
      <p>授权日期：{{ formatDate(getNowDateTime(), 'YYYY-MM-DD') }}</p>
    </div>
    <el-row type="flex" class="row-bg mb-10px" justify="space-around">
      <div>
        <el-button type="primary" @click="submitForm(1)" >授权并继续</el-button>
        <el-button type="warning" @click="submitForm(0)">不授权并继续</el-button>
      </div>
    </el-row>
  </div>
</template>
<script setup lang="ts">
import { UserAuthApi, UserAuth } from '@/api/business/userauth'
import { BizConfigApi } from '@/api/business/config'
import {formatDate, getNowDateTime} from "@/utils/formatTime";

/** 用户授权维护 表单 */
defineOptions({ name: 'AppUserAuthForm' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formData = ref({
  id: undefined,
  userId: undefined,
  deptId: undefined,
  name: undefined,
  idCard: undefined,
  mobile: undefined,
  status: undefined,
  remark: undefined,
  read: undefined,
  isAuth: undefined,
})
const formRules = reactive({
  name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
  idCard: [{ required: true, message: '身份证不能为空', trigger: 'blur' }],
  read: [{ required: true, message: '请阅读并同意用户协议/隐私协议', trigger: 'blur' }],
})
const formRef = ref() // 表单 Ref

let submitSuccess = ref(false)

/** 提交表单 */
const submitForm = async (isAuth:number) => {
  // 校验表单
  await formRef.value.validate()
  // 提交请求
  formLoading.value = true
  try {
    if (!formData.value.userId){
      message.error('客户标识不存在，无法填写进件信息')
      return
    }

    formData.value.isAuth = isAuth
    const data = formData.value as unknown as UserAuth
    await UserAuthApi.createUserAuth(data)
    resetForm()
    //message.success(t('common.createSuccess'))
    submitSuccess.value = true;
  } finally {
    formLoading.value = false
    authShow.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    userId: undefined,
    deptId: undefined,
    name: undefined,
    idCard: undefined,
    mobile: undefined,
    status: undefined,
    remark: undefined,
    read: undefined,
    isAuth: undefined,
  }
  formRef.value?.resetFields()
}

let userxyShow = ref(false)
let userxyShowDis = ref(false)
let userzcShow = ref(false)
let userzcShowDis = ref(false)

let config = ref()
const getConfig = async () => {
  config.value = await BizConfigApi.appGetConfig()
}

let authShow = ref(false)

const route = useRoute() // 路由
const router = useRouter() // 路由

/** 初始化 **/
onMounted(() => {
  // 如果数据 ID 不存在，显示错误提示并关闭页面
  if (!route.query.id) {
    message.error('客户标识不存在，无法填写进件信息')
    return
  }

  // 从路由参数中获取数据 ID
  formData.value.userId = route.query.id as any

  getConfig()
})
</script>

<style scoped>
.box{
  background: linear-gradient(to top, #a6d4ff, #e4f1fb);
  height: 100vh;
}
.boxc{
  padding: 0 10%;
}
.btn{
  width: 100%;
  height: 40px;
  border-radius: 40px;
}
.ipt{
  margin-bottom: 30px;
}
.fixbtn{
  position: fixed;       /* 固定定位 */
  bottom: 20px;          /* 离屏幕底部20px */
  left: 50%;             /* 水平居中（50%是相对视口的宽度） */
  transform: translateX(-50%); /* 调整元素的水平偏移，使其完全居中 */
}
:deep(.el-input__wrapper){
  border-radius: 40px;
  height: 40px;
}
</style>
